<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 200px;
			height: 400px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
		}
		p{
			font-size: 20px;
			position: absolute;
		}
		#div{
			width: 20px;
			height: 400px;
			margin: 0 auto;
			position: absolute;
			top: 0;
			left: 230px;
			border-radius: 10px;	
			border: 1px solid black;		
		}
		#div1{
			width: 20px;
			height: 100px;
			cursor: pointer;
			position: absolute;
			border-radius: 10px;
			background: blue;
		}
		#BOX{
			width: 250px;
			height: 400px;
			margin: 100px auto;
			border: 1px solid red;
			position: relative;
		}
	</style>
</head>
<body>
	<div id="BOX">
		<div id="box">
			<p>
		是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼是对方忙你的烦恼就那啥的烦恼
			</p>
		</div>
		<div id="div">
			<div id="div1">
				
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var box = document.getElementById("box");
	var div = document.getElementById("div");
	var p = document.getElementsByTagName("p")[0];
	var divA = document.getElementById("div1");
	var a = p.offsetHeight;
	divA.onmousedown = function(event){
		var ev = event || window.event;
		var yy = ev.clientY;
		var YYY = divA.offsetTop;
		
		document.onmousemove = function(event){
			var ev = event || window.event;
			if(ev.preventDefault){
				ev.preventDefault();
			}else{
				ev.returnValue = false;
			}
			var y = ev.clientY;
			var XXX = y - yy + YYY ;
			console.log(XXX);
			var maxHeight = div.clientHeight - divA.offsetHeight;
			if(XXX <= 0){
				XXX = 0;
			}else if(XXX >= maxHeight){
				XXX = maxHeight;
			}
			divA.style.top = XXX+ "px";
			var scaleY = XXX/maxHeight;
			box.scrollTop = scaleY * (a - 400);
		}
	}
	document.onmouseup = function(){
		document.onmousemove = null;
	}
	var Y = 0;
	div.onmousedown = function(event){
		var ev = event||window.event;
		var H = ev.clientY- BOX.offsetTop;
		var haha = H - divA.offsetHeight/2;
		var maxHeight = div.clientHeight - divA.offsetHeight;
		if(haha <= 0){
			haha = 0;
		}else if(haha >= maxHeight){
			haha = maxHeight;
		}
		var scaleY = haha/maxHeight;
		box.scrollTop = scaleY * (a - 400);
		divA.style.top = haha + "px";
		divA.onmousedown();
	}
</script>
</html>